<template>
    <div class="aboutus">
        <!-- 左边滑动区域 -->
        <div class="left">
            <el-scrollbar height="100%">
                <div v-for="(item, index) in routerS.categories" :key="index">
                    <router-link :to="`/aboutus/cate${index + 1}`" @click="routerS.changeSelected(index)">
                        <p class="scrollbar-demo-item" :class="{ 'selected': routerS.isSelected[index] }">
                            {{ item }}
                            <el-badge is-dot v-if="index === 2">
                            </el-badge>
                            <el-badge value="new" v-if="index === 1">
                            </el-badge>
                            <el-badge value="new" v-if="index === 5">
                            </el-badge>
                            <el-badge is-dot v-if="index === 8">
                            </el-badge>
                        </p>
                    </router-link>
                </div>
            </el-scrollbar>
        </div>
        <!-- 右边内容区域 -->
        <div class="right" ref="rightContent">
            <!-- 路由出口 -->
            <el-scrollbar height="100%">
                <router-view></router-view>
            </el-scrollbar>
        </div>
    </div>
</template>


<script setup>
import { routerStore } from '@/stores/router'
import { useRoute } from 'vue-router';
import { ref, onMounted, watch } from 'vue';
import { ElScrollbar, ElBadge } from 'element-plus'
//实例化routerStore
const routerS = routerStore();
const route = useRoute();
// 左边选中项索引
const id = ref(route.params.id);
//rightContent
const rightContent = ref(null);
const selectedIndex = ref(0); // 监听的数组下标
// 监听路由参数，更新选中项
watch(() => route.params.id, (newId) => {
    const index = parseInt(newId, 10) - 1; // 根据路由参数计算选中的数组下标
    if (index >= 0 && index < routerS.categories.length) {
        routerS.changeSelected(index); // 更新选中的索引
    }
});
onMounted(() => {
    const index = parseInt(route.params.index, 10) - 1;
    if (index >= 0 && index < routerS.categories.length) {
        routerS.changeSelected(index);
    }
})
</script>

<style scoped lang="scss">
.aboutus {
    display: flex;
    flex-direction: row;

    .left {
        width: 30%;
        height: 100vh;

        .scrollbar-demo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            margin: 10px;
            text-align: center;
            border-radius: 4px;
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            color: #333;
            transition: background 0.5s, transform 0.3s, box-shadow 0.3s;
            /* 添加过渡效果 */
            position: relative;
            /* 为伪元素定位 */
            overflow: hidden;

            /* 防止子元素溢出 */
            &:hover {
                /* 悬停时的背景色 */
                color: #333;
                /* 悬停时的文本颜色 */
                transform: scale(1.05);
                /* 悬停时稍微放大 */
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                /* 悬停时增加阴影 */
                font-size: 18px;
                /* 悬停时字体大小 */
            }

            &.selected {
                background: #1f9a7a;
                font-size: 18px;
            }
        }
    }

    .right {
        width: 70%;
        height: 100vh;
    }
}
</style>